<template>
  <Modal
    v-model="modalData.show"
    :footer-hide="true"
    :mask-closable="false"
    :width="1000"
    :title="`${currentItem.name}部署位置列表`"
  >
    <search-table
      :data="list"
      :columns="col"
      :page.sync="queryParams.pageIndex"
      :size.sync="queryParams.pageSize"
      :total="total"
      :loading="loading"
      @queryFun="getNewData">
      <template slot="search">
        <h3>公共组件名称：{{currentItem.name}}</h3>
      </template>
    </search-table>
  </Modal>
</template>
<script>
import encryption from '@/libs/encryption.js'
import resourcesReportedMixin from '@/mixin/resources-reported-mixin'
import pageTitle from '@/mixin/pageTitle';
import itemUpload from '../../components/item-upload/index.vue'
import {
  queryProductPartList,
} from '../api/productPart'
import {queryInstallPosition} from "../api/productPart";
export default {
  components: {itemUpload},
  mixins: [resourcesReportedMixin,pageTitle],
  props: {

  },
  data () {
    return {
      modalData:{
        show:false,
        loading:false
      },
      currentItem:{},
      unitList:[],
      vendorList:[],
      assetCategoryList:[],
      loading:false,
      total:0,
      queryParams:{
        pageIndex:1,
        pageSize:10
      },
      // 用户信息
      USER_ID: '',
      isRootDesinger: '',
      distributed: false,
      list: [],
      col: [
        {
          title:'IP',
          key:'ip',
          tooltip: true
        },
        {
          title:'端口',
          key:'port',
          tooltip: true
        },

        {
          title:'协议类型',
          key:'protocolType',
          tooltip:true
        },
        {
          title:'应用名称',
          key:'application',
          width:140,
          tooltip: true,
        },
        {
          title:'网络名称',
          key:'networkName',
          width:140,
          tooltip: true,
        },
        {
          title:'网络区域',
          key:'networkMeshName',
          width:140,
          tooltip: true,
        }
      ]
    }
  },
  computed: {

  },
  watch: {


  },
  created () {
    // 获取用户id
    let November = sessionStorage.getItem('November')
    November = JSON.parse(encryption.SelfUseDecrypt(November))
    this.USER_ID = November.userId
    this.isRootDesinger = November.isRootDesinger
    this.distributed = November.distributed
    // this.distributedRange = this.$store.state.user.distributedRange
  },
  mounted () {
    // let getPage = this.$route.query.page ? parseInt(this.$route.query.page) : 1
    // this.queryParams.pageIndex = getPage
    // this.getNewData()

  },
  methods: {
    openModal(obj){
      this.currentItem = obj;
      this.modalData.show = true;
      this.getNewData()
    },
    getNewData(isRefresh){
      // 列表
      if (!isRefresh) { // 非刷新操作才需要展示等待中的画面
        this.loading = true
      }
     let partId = this.currentItem.id;
      queryInstallPosition(partId)
        .then(res => {
          if (res.code == 1) {
            this.total =res.data.total;
            this.list = res.data.items
          }
          this.loading = false
        })
        .catch(err => {
          this.loading = false
        })
    },
    selectPart(){
      this.queryParams.pageIndex = 1;
      this.getNewData();
    },
    searchPartName(){
      this.queryParams.pageIndex = 1;
      this.getNewData();
    },
    refreshPartList(){
      this.queryParams = {
        pageIndex:1,
        pageSize:10,
      }
      this.getNewData()
    },
  },
  beforeDestroy () {

  }
}
</script>
<style scoped>
#quesDetail {
  display: table;
  width: 100%;
  border: 1px solid var(--table-border);
  table-layout: fixed;
  word-break: break-all;
}
#quesDetail p {
  display: table-row;
  line-height: 36px;
  text-align: center;
}
#quesDetail p span {
  display: table-cell;
  border-bottom: 1px solid var(--table-border);
}
.ios-alert {
  /* position: absolute;
        top: -44px;
        right: -404px; */
  color: orange;
  font-size: 16px;
  cursor: pointer;
}
.too {
  position: absolute;
  left: 113px;
  top: -1px;
}
.my-form-item{
  display: flex;
}
.item-table {
  display: table;
  width: 100%;
  border: 1px solid #eee;
  table-layout: fixed;
  word-break: break-all;
}
.item-table p {
  display: table-row;
  line-height: 36px;
  text-align: center;
}
.item-table p span {
  display: table-cell;
  border-bottom: 1px solid #eee;
}
</style>

